<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>添加爬虫规则</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

    <link rel="apple-touch-icon" sizes="76x76" href="/static/img/apple-icon.png" />
    <link rel="icon" type="image/png" href="/static/img/favicon.png" />

    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

    <!-- CSS Files -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/static/css/material-bootstrap-wizard.css" rel="stylesheet" />

    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="/static/css/demo.css" rel="stylesheet" />

    <style type="text/css">
        .wizard-header{
            padding: 0;
        }
        .input-group{
            width: 100%;
        }

    </style>
</head>

<body>
    <div class="image-container set-full-height" style="background-image: url('/static/img/wizard-book.jpg')">
        <!--   Creative Tim Branding   -->
        <a href="#" id='logo_a'>
             <div class="logo-container">
                <div class="logo">
                    <img src="/static/img/new_logo.png">
                </div>
                <div class="brand">
                    cc-pac
                </div>
            </div>
        </a>

        <!--  Made With Material Kit  -->
        <a href="#/material-kit/index.html?ref=material-bootstrap-wizard" class="made-with-mk">
            <div class="brand">pac</div>
            <div class="made-with">Made with <strong>CongWT</strong></div>
        </a>

        <!--   Big container   -->
        <div class="container">
            <div class="row">
                <div class="col-sm-8 col-sm-offset-2" style="margin: 0 auto; width: 100%;">
                    <!--      Wizard container        -->
                    <div class="wizard-container" style="margin: 0 auto; width: 1024px;padding-top: 50px;">
                        <div class="card wizard-card" data-color="red" id="wizard">
                            <form action="/addSB/" method="POST">
                        <!--        You can switch " data-color="blue" "  with one of the next bright colors: "green", "orange", "red", "purple"             -->

                                <div class="wizard-header" style="padding: 0;">
                                    <h3 class="wizard-title">
                                        新增爬虫规则
                                    </h3>
                                    <h6>使用XPATH解析页面元素进行定位，<a href="#">使用帮助</a></h6>
                                </div>
                                <div class="wizard-navigation">
                                    <ul>
                                        <li><a style="font-weight: 600;" href="#details" data-toggle="tab">基本信息</a></li>
                                        <li><a style="font-weight: 600;" href="#captain" data-toggle="tab">定位分页列表数据</a></li>
                                        <!-- <li><a style="font-weight: 600;" href="#description" data-toggle="tab">定位详情页数据</a></li> -->
                                        <li><a style="font-weight: 600;" href="#lookOK" data-toggle="tab">测试确认</a></li>
                                    </ul>
                                </div>

                                <div class="tab-content" style="height: 345px;">
                                    <div class="tab-pane" id="details">
                                        <div class="row">
                                            <div class="col-sm-4" style="">
                                                <div class="form-group label-floating">
                                                    <label class="control-label">业务模块</label>
                                                    <select class="form-control valid" aria-invalid="false" name="service_type">
                                                        <option disabled="disabled"></option>
                                                        <option selected="selected">对外招标</option>
                                                        <option>实地控股</option>
                                                        <option>其他</option>
                                                        <option>+</option>
                                                    </select>
                                                    <span class="material-input"></span>
                                                </div>
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">地区</label>
                                                        <input name="area" type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">省份</label>
                                                        <input name="province" type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">城市</label>
                                                        <input name="city" type="text" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4" style="">
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">类型</label>
                                                        <input name="url_type" type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group label-floating">
                                                    <label class="control-label">批次</label>
                                                    <select class="form-control valid" aria-invalid="false" name="tags">
                                                        <option disabled="" selected=""></option>
                                                        <option>1 </option>
                                                        <option>2 </option>
                                                        <option>3 </option>
                                                        <option>4 </option>
                                                        <option>5 </option>
                                                        <option>6+ </option>
                                                    </select>
                                                    <span class="material-input"></span>
                                                </div>
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;运行时间</label>
                                                        <input name="run_time" type="date" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-4">
                                                <div class="form-group">
                                                    <label>备注1</label>
                                                    <textarea class="form-control" name=bz1 placeholder="" rows="2"></textarea>
                                                </div>
                                                <div class="form-group">
                                                    <label>备注2</label>
                                                    <textarea class="form-control" name=bz2 placeholder="" rows="2"></textarea>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="tab-pane" id="captain">

                                        <div class="row">
                                            <div class="col-sm-6" style="">
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">URL地址</label>
                                                        <input id='url_source' name="url_source" type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">等待页面数据</label>
                                                        <input name="resolve_page_wait" type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">下一页</label>
                                                        <input name="resolve_next_page" type="text" class="form-control">
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="col-sm-3" style="">
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">解析类型</label>
                                                        <input name="resolve_type" type="text" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-3" style="">
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">解析规则</label>
                                                        <input name="resolve_rule" type="text" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6" style="">
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">解析列表源</label>
                                                        <input name="resolve_sources" type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">解析数据源</label>
                                                        <input name="resolve_source" type="text" class="form-control">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="" style="margin-top: 13px;">
                                            <div class="testMSGF" style="width: 667px;height: 130px;border: #D2D2D2 1px solid;float: left;overflow-y: scroll;overflow-x: hidden;white-space: nowrap;">testMSG-测试数据显示:
                                            </div>
                                            <input type='button' class='btn btn-fill btn-danger btn-wd' name='ceshiPages' value='测试' style="top: 81px;" />
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="description">
                                        <div class="row">
                                            <div class="col-sm-6" style="">
                                                <div class="form-group label-floating">
                                                    <label class="control-label">批次</label>
                                                    <select class="form-control valid" aria-invalid="false" name="cpage_type">
                                                        <option disabled="" selected=""></option>
                                                        <option>1</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                        <option>6</option>
                                                    </select>
                                                    <span class="material-input"></span>
                                                </div>

                                                <div class="label-floating">
                                                    <label>解析列表</label>
                                                    <div class="page_list_reader" style="max-height:120px;overflow-y: scroll;overflow-x: hidden;white-space: nowrap;">
                                                        <div>
                                                            1-<a href="#">title1</a>
                                                        </div>
                                                        <div>
                                                            2-<a href="#">title2</a>
                                                        </div>
                                                        <div>
                                                            3-<a href="#">title3</a>
                                                        </div>
                                                        <div>
                                                            4-<a href="#">title4</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6" style="">
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">解析类型</label>
                                                        <input name="cresolve_type" type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">解析规则</label>
                                                        <input name="cresolve_rule" type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="input-group">
                                                    <div class="form-group label-floating">
                                                        <label class="control-label">解析源数据</label>
                                                        <input name="cresolve_source" type="text" class="form-control">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="" style="margin-top: 13px;">
                                            <div class="testMSGF2" style="width: 667px;height: 130px;border: #D2D2D2 1px solid;float: left;overflow-y: scroll;overflow-x: hidden;white-space: nowrap;">testMSG-测试数据显示:
                                            </div>
                                            <input type='button' class='btn btn-fill btn-danger btn-wd' name='ceshiPage' value='测试' style="top: 81px;" />
                                        </div>

                                    </div>
                                    <div class="tab-pane" id="lookOK">
                                        <div class="row">
                                            <div class="col-sm-3">
                                                <div class="form-group" style="margin: 0;">
                                                    <label class="control-label"><b>解析结果</b></label>
                                                    <div style="margin-left: 20px;">
                                                        <p name="look_pl_contentPage">一共 {x} 页</p>
                                                        <p name="look_pl_pageCount">一页 {x} 条</p>
                                                        <p name="look_pl_contentCount">一共 {x} 条</p>
                                                        <p name="look_pl_valid">校对 {x} 条</p>
                                                    </div>
                                                    <label class="control-label"><b>单条数据</b></label>
                                                    <div style="margin-left: 20px;">
                                                        <p name="look_pl_url">url:{x}</p>
                                                        <p name="look_pl_title">title:{x}</p>
                                                        <p name="look_pl_date">date:{x}</p>
                                                    </div>
                                                    <label class="control-label"><b><p name="look_pl_pass">数据完整度:{x}</p></b></label>
                                                </div>
                                            </div>
                                            <div class="col-sm-9">
                                                <label ><b>解析列表</b></label>
                                                <div class="page_list_reader_all" style="max-height:300px;overflow-y: scroll;overflow-x: hidden;white-space: nowrap;">
                                                    <div>
                                                        1-<a href="#">title1</a>
                                                    </div>
                                                    <div>
                                                        2-<a href="#">title2</a>
                                                    </div>
                                                    <div>
                                                        3-<a href="#">title3</a>
                                                    </div>
                                                    <div>
                                                        4-<a href="#">title4</a>
                                                    </div>
                                                    <div>
                                                        5-<a href="#">title5</a>
                                                    </div>
                                                    <div>
                                                        6-<a href="#">title6</a>
                                                    </div>
                                                    <div>
                                                        7-<a href="#">title7</a>
                                                    </div>
                                                    <div>
                                                        8-<a href="#">title8</a>
                                                    </div>
                                                    <div>
                                                        9-<a href="#">title9</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="wizard-footer">
                                    <div class="pull-right">
                                        <input type='button' class='btn btn-next btn-fill btn-danger btn-wd' name='next' value='下一步' />
                                        <button type='submit' class='btn btn-finish btn-fill btn-danger btn-wd' name='finish' value='完成' >完成</button>
                                    </div>
                                    <div class="pull-left">
                                        <!-- <input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='上一步' /> -->

                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </form>
                        </div>
                    </div> <!-- wizard container -->
                </div>
            </div> <!-- row -->
        </div> <!--  big container -->

        <div class="footer" style="margin-top: 30px;">
            <div class="container text-center">
                 made with <i class="fa fa-heart heart"></i> by <a href="#">CongWT</a>
            </div>
        </div>
    </div>

</body>
    <!--   Core JS Files   -->
    <script src="/static/js/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/js/jquery.bootstrap.js" type="text/javascript"></script>

    <!--  Plugin for the Wizard -->
    <script src="/static/js/material-bootstrap-wizard.js"></script>

    <!--  More information about jquery.validate here: http://jqueryvalidation.org/  -->
    <script src="/static/js/jquery.validate.min.js"></script>

    <script type="text/javascript">
    var ldos = [];// 爬取数据

    var show_ldo = {};// 显示数据对象

    function reputh(){// 清空数据
        ldos = [];// 爬取数据
        show_ldo = {};// 显示数据对象
    }
    // 刷新爬取的数据列表
    $("a[href='#description']").click(function(){
        function spl_pase(i,o){return '<div>'+ i + '-' + o['news_date']+ '-' +'<a target="_blank" href="'+o['url_source']+'">'+o['news_title'] +'</a></div>';}
        var showd_html = '';
        for (var i = 0; i < ldos.length; i++) {
            showd_html += spl_pase(i+1, ldos[i]);
        }
        $(".page_list_reader").html(showd_html);
    });
    // 刷新爬取的数据对象
    $("a[href='#lookOK']").click(function(){
        function spl_pase(i,o){return '<div>'+ i + '-' + o['news_date']+ '-' +'<a style="color: blue;" target="_blank" href="'+o['url_source']+'">'+o['news_title'] +'</a></div>';}
        var showd_html = '';
        var passc = 0;
        for (var i = 0; i < ldos.length; i++) {
            showd_html += spl_pase(i+1, ldos[i]);
            if(i > 5)passc=50;
        }
        $(".page_list_reader_all").html(showd_html);
        if(ldos.length > 0){
            show_ldo['url'] = ldos[0]['url_source'];
            show_ldo['title'] = ldos[0]['news_title'];
            show_ldo['date'] = ldos[0]['news_date'];
            if(show_ldo['url'] && show_ldo['url'] != '')passc+=10;
            if(show_ldo['title'] && show_ldo['title'] != '')passc+=10;
            if(show_ldo['date'] && show_ldo['date'] != '')passc+=10;
        }
        if(show_ldo['valid'] == show_ldo['contentCount'] && show_ldo['valid'] != '0')passc+=20;
        show_ldo['pass'] = passc+'%';   
        for(var namek in show_ldo){
            var show_dom = $("p[name='look_pl_"+namek+"']");
            show_dom.text(show_dom.text().replace('{x}', show_ldo[namek]));
        }
    });
    
    function loadt(){
        // var hshowInterval = setInterval(function(){}, 5);
        var rets = '===this page Count=15, find_cf=0, find_error=0, Exception=0===';
            alert(rets.split(',').toString());
            alert(JSON.stringify(rets.split(',')));
    }
    $('#logo_a').click(function(){loadt();});

    </script>

    <script type="text/javascript">

    var LP_to2 = {};
    var LP_tname = '';  
    var LP_t_rets = [];
    var LP_runing = true;

    function hshow(urlend){

        var testMSG = $(".testMSGF")[0];
        var hshowInterval = setInterval(function(){
            var rets = LP_t_rets.shift();
            if(!rets){
                clearInterval(hshowInterval);// 去掉定时器
                return;
            }
            if(rets == urlend){// 判断是否为结束字符
                clearInterval(LP_to2);// 去掉定时器
            }
            if(!LP_runing){
                clearInterval(hshowInterval);// 去掉定时器
                clearInterval(LP_to2);// 去掉定时器
            }

            if(rets.indexOf('ldo=')==0){// 添加到对象集合
                ldos.push(eval('('+rets.replace('ldo=', '')+')'));
            }else if(show_ldo['pageCount']==undefined && rets.indexOf('===this page Count=')==0){// 添加到对象集合
                show_ldo['pageCount'] = rets.substring(0, rets.indexOf(',')).replace('===this page Count=', ''); 
            }else if(show_ldo['contentPage']==undefined && rets.indexOf('contentPage=')==0){// 添加到对象集合
                show_ldo['contentPage'] = rets.replace('contentPage=', ''); 
            }else if(show_ldo['contentCount']==undefined && rets.indexOf('contentCount=')==0){// 添加到对象集合
                show_ldo['contentCount'] = rets.replace('contentCount=', '');
            }else if(show_ldo['valid']==undefined && rets.indexOf('有效总数据：')==0){// 添加到对象集合
                show_ldo['valid'] = rets.replace('有效总数据：', '');
            }

            testMSG.innerText += rets;
            testMSG.innerHTML += '<br/>';
            console.info(''+(testMSG.scrollHeight - testMSG.scrollTop));
            if(testMSG.scrollHeight - testMSG.scrollTop <= 150)
                testMSG.scrollTop = testMSG.scrollHeight;
        }, 5);  
    }
    function readTo2018(urlend){
        $.ajax({
            url:"/readPLP/",
            data:{},
            type:"POST",
            dataType:"TEXT",
            success: function(rets){
                if(rets == '')return;
                rets = eval(rets);
                console.info("post-readPLP="+rets);
                LP_t_rets.push(...rets);
                hshow(urlend);
            }   
        });
    }
    $(function(){
        ceshiPages = $("input[name='ceshiPages']");
        ceshiPages.click(function(){
            if($(this).attr('class').indexOf('btn-danger') < 0){
                $(this).addClass('btn-danger');
                $(this).removeClass('btn-default');
                clearInterval(LP_to2);// 去掉定时器
                // 请求后台结束
                $.ajax({
                    url:"/testLPstop/",
                    type:"POST",
                    data:{'tname':LP_tname},
                    dataType:"TEXT",
                    success: function(ret){
                        alert("stop-testLP="+ret);
                        LP_runing = false;
                    }   
                });
            }else{
                $(this).addClass('btn-default');
                $(this).removeClass('btn-danger');

                var cis = $("#captain input");
                var datas = {};
                var urlend = '';
                for(var ci=0; ci < cis.length;ci++){
                    datas[cis[ci].name] = cis[ci].value;
                }
                urlend = datas['url_source'] + '_end';
                $.ajax({
                    url:"/testLP/",
                    type:"POST",
                    data:datas,
                    dataType:"TEXT",
                    success: function(ret){
                        if(!ret){
                            alert("测试失败！post-testLP="+ret);
                            $(this).addClass('btn-danger');
                            $(this).removeClass('btn-default');
                            return;
                        }
                        LP_t_rets = [];
                        LP_tname = ret;
                        alert("post-testLP="+ret);
                        LP_runing = true;
                        LP_to2 = setInterval('readTo2018("'+urlend+'")',1000);// 定时器
                    }   
                });

            }

        });
    });
    </script>

    <script type="text/javascript">

    var IP_to2 = {};
    var IP_tname = '';  
    var IP_t_rets = [];
    var IP_runing = true;

    function IP_hshow(urlend){

        var testMSG = $(".testMSGF2")[0];
        var hshowInterval = setInterval(function(){
            var rets = IP_t_rets.shift();
            if(!rets){
                clearInterval(hshowInterval);// 去掉定时器
                return;
            }
            if(rets == urlend){// 判断是否为结束字符
                clearInterval(IP_to2);// 去掉定时器
                $("input[name='ceshiPage']").click();
            }
            if(!IP_runing){
                clearInterval(hshowInterval);// 去掉定时器
                clearInterval(IP_to2);// 去掉定时器
            }   
            testMSG.innerText += rets;
            testMSG.innerHTML += '<br/>';
            console.info(''+(testMSG.scrollHeight - testMSG.scrollTop));
            if(testMSG.scrollHeight - testMSG.scrollTop <= 150)
                testMSG.scrollTop = testMSG.scrollHeight;
        }, 5);  
    }
    function IP_readTo2018(urlend){
        $.ajax({
            url:"/readPIP/",
            data:{},
            type:"POST",
            dataType:"TEXT",
            success: function(rets){
                if(rets == '')return;
                rets = eval(rets);
                console.info("post-readPIP="+rets);
                IP_t_rets.push(...rets);
                IP_hshow(urlend);
            }   
        });
    }
    $(function(){
        IP_ceshiPage = $("input[name='ceshiPage']");
        IP_ceshiPage.click(function(){
            if($(this).attr('class').indexOf('btn-danger') < 0){
                $(this).addClass('btn-danger');
                $(this).removeClass('btn-default');
                clearInterval(IP_to2);// 去掉定时器
                // 请求后台结束
                $.ajax({
                    url:"/testIPstop/",
                    type:"POST",
                    data:{'tname':IP_tname},
                    dataType:"TEXT",
                    success: function(ret){
                        alert("stop-testIP="+ret);
                        IP_runing = false;
                    }   
                });
            }else{
                if(ldos.length < 1){
                    alert('未爬取到数据列表！');
                    return;
                }
                $(this).addClass('btn-default');
                $(this).removeClass('btn-danger');
                var cis = $("#description input");
                var datas = {};
                var urlend = '';
                var page_urls = [];

                for (var i = 0; i < ldos.length; i++) {
                    page_urls.push(ldos[i]['url_source']);
                }
                for(var ci=0; ci < cis.length;ci++){
                    datas[cis[ci].name] = cis[ci].value;
                }
                datas['curl_sources'] = JSON.stringify(page_urls);
                urlend = page_urls[page_urls.length-1] + '_end';
                $.ajax({
                    url:"/testIP/",
                    type:"POST",
                    data:datas,
                    dataType:"TEXT",
                    success: function(ret){
                        if(!ret){
                            alert("测试失败！post-testIP="+ret);
                            $(this).addClass('btn-danger');
                            $(this).removeClass('btn-default');
                            return;
                        }
                        IP_t_rets = [];
                        IP_tname = ret;
                        alert("post-testIP="+ret);
                        IP_runing = true;
                        IP_to2 = setInterval('IP_readTo2018("'+urlend+'")',1000);// 定时器
                    }   
                });

            }

        });
    });
    </script>

</html>
